<template>
    <div>
        <div class="main">
            <img :src="item.uimg" alt="">
            <div class="item1">
                <p class="p1">{{item.name}}</p>
                <p class="p2">ID：{{item.uid}}</p>
                <p class="p2">开通时间：2018-10-12</p>
            </div>
            <div class="item2">
                <p class="p2">{{item.agent.name}}</p>
                <p class="p2">{{item.up_agent}} </p>
            </div>
        </div>
        <div class="main1">
            <div class="item-l">
                <p class="p2">￥{{item.rebate}}</p>
            </div>
            <div class="item-r">
                <p class="p2">查看上级</p>
                <button class="order">查看订单</button>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import Public from '@/assets/js/public';

    export default {
        /** kebab-case */
        name: 'mem-search-item-top',

        data() {
            return {};
        },
        props: {
            item: {
                type: Object,
                required: true
            }
        },
        components: {},
        methods: {
            getIcon(icon) {
                return Public.ossImg + icon + '.svg';
            }
        },
        computed: {},
        watch: {
            // 监听具体数据变化，并做相应的处理
        },
        beforeCreate() {
            /** 可以在这加个loading事件，在加载实例时触发 */
            // 这个阶段实例的data、methods是读不到的
        },
        created() {
            console.log('saddsa', this.item);
        }
    };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    @import "../../assets/stylus/main.styl";
    .p1 {
        word(14px, #666)
    }

    .p2 {
        word(14px, #999)
    }

    .main1 {
        width 100%;
        flex-x();
        height: vw(40);
        background #fff;
        box-sizing: border-box;
        .item-l {
            width: 30vw
            padding-left 23vw
        }
        .item-r {
            width: 45vw
            flex-x();
            .order {
                width:vw(94)
                height:vw(40)
                line-height vw(40)
                background main-color
                word-vw(14,white);
            }
        }
        & img {
            width: vw(55px)
            height: vw(55px)
        }
    }

    .main {
        width 100%;
        flex-x();
        padding 0 6vw;
        height: vw(90px);
        background #fff;
        box-sizing: border-box;
        bor-b(#efefef);
        .item1 {
            flex-y();
            flex: 1;
            height 16vw
            align-items flex-start;
            padding-left 3vw
            justify-content space-around
        }

        .item2 {
            flex-y();
            height 16vw
            justify-content space-around;
            align-items flex-end;
            & p {
                line-height 1.2
            }
        }
        & img {
            width: vw(55px)
            height: vw(55px)
        }
    }

    .flex-r
        flex-x()

    .flex-c
        flex-y()

    .center
        flex-center()

    .divider
        divider()

    .space
        space()
</style>
